<template>
  <!-- <px-scrollbar style="float: left; width: 260px; height: 100%" height="260px">
    <px-radio-group v-model="Materialvalue" class="ml-4">
      <px-radio
        v-for="(item, index) in chartvalue.detailList"
        :key="index"
        style="width: 210px"
        :label="item.field"
        size="large"
        @change="getchartsValue"
        >{{ item.name }}</px-radio
      >
    </px-radio-group>
  </px-scrollbar> -->

  <div class="parent">
    <px-select
      v-model="Materialvalue"
      style="position: absolute; top: -40px; right: 20px"
      class="m-2"
      filterable
      placeholder="Select"
      size="small"
      @change="getchartsValue"
    >
      <px-option v-for="(item, index) in chartvalue.detailList" :key="index" :label="item.name" :value="item.field" />
    </px-select>
    <px-tooltip class="box-item" effect="dark" content="导出图片" placement="bottom">
      <px-icon class="downImg" color="#3b82f6" @click="saveImg"><Download /></px-icon>
    </px-tooltip>
    <echartsDom
      v-if="isShowEcharts"
      ref="childRef"
      :width="'100%'"
      :height="'260px'"
      :option="option"
      :name="`用水趋势图(${nametitle})${starttime}-${endtime}`"
    />
    <div v-else>
      <px-empty :image-size="50" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref, watch, onMounted } from "vue";
import {
  balanceReportqueryTrendChartUPWFuture,
  balanceReportqueryTrendChartTWFuture,
  balanceReportqueryTrendChartWWFuture
} from "@/api/waterconsumption";
import echartsDom from "./echartsDom.vue";
import { queryConsumeChartForDay } from "@/api/waterKanban";
const childRef = ref(null);
const saveImg = () => {
  childRef.value.saveImg();
};
const props = defineProps({
  width: {
    type: String,
    default: ""
  },
  timeunit: {
    type: String,
    default: ""
  },
  activewater: {
    type: String,
    default: ""
  },
  starttime: {
    type: String,
    default: ""
  },
  endtime: {
    type: String,
    default: ""
  },
  height: {
    type: String,
    default: ""
  },
  color: {
    type: String,
    default: "#3B82F6"
  },
  chartvalue: {
    type: Object,
    required: true
  },
  queryParams: {
    type: Object,
    required: true
  },
  forecast: {
    type: Boolean,
    default: false
  }
});
const isShowEcharts = ref(false);
const state = reactive({
  option: {},
  Materialvalue: "",
  series: [],
  yAxis: []
});
const { option, Materialvalue, series, yAxis } = toRefs(state);
const getchartsValue = () => {
  getoptions();
};
const pieClick = id => {
  Materialvalue.value = id;
  getoptions();
};

onMounted(() => {});
let nametitle = "";
const getoptions = () => {
  console.log(props.chartvalue);
  if (props.activewater == "tap") {
    nametitle = "自来水用量";
  }
  if (props.activewater == "pure") {
    nametitle = "纯水用量";
  }
  if (props.activewater == "waste") {
    nametitle = "废水用量";
  }
  yAxis.value = [
    {
      name: "总量m3",
      alignTicks: true,
      type: "value",
      nameTextStyle: {
        padding: [0, 0, 0, 50]
      }
    }
  ];
  if (props.timeunit != "DAY") {
    yAxis.value.push({
      name: `平均值m3/${props.timeunit == "MONTH" ? "m" : props.timeunit == "YEAR" ? "y" : "d"}`,
      alignTicks: true,
      type: "value",
      nameTextStyle: {
        padding: [0, 0, 0, -50]
      }
    });
  }
  series.value = [];
  if (props.chartvalue != null && props.chartvalue.xaxis) {
    let showoption = props.chartvalue.detailList.filter(item => item.field == Materialvalue.value);
    console.log();

    isShowEcharts.value = true;
    if (showoption[0].avgList != null) {
      series.value.push({
        name: `${showoption[0].name}平均值`,
        type: "line",
        yAxisIndex: 1,
        data: showoption[0].avgList
      });
    }
    if (showoption[0].dataList != null) {
      series.value.push({
        name: `${showoption[0].name}`,
        type: "line",
        yAxisIndex: 0,
        data: showoption[0].dataList,
        areaStyle: {
          opacity: 0.1
        }
      });
    }
    // if (showoption[0].forecastList != null) {
    //   series.value.push({
    //     name: `${showoption[0].name}预测值`,
    //     type: "line",
    //     data: showoption[0].forecastList
    //   });
    // }
    if (props.activewater == "tap") {
      balanceReportqueryTrendChartTWFuture({
        forecast: props.forecast,
        field: Materialvalue.value,
        timeUnit: props.queryParams.timeUnit,
        startTime: props.queryParams.startTime,
        endTime: props.queryParams.endTime
      })
        .then(res => {
          console.log(res);
          if (res != null) {
            series.value.push({
              name: `${showoption[0].name}预测值`,
              type: "line",
              data: res.forecastList
            });
            option.value = {
              color: ["#3B82F6 ", "#39C670", "#ffcf72"],
              toolbox: {
                show: false,
                feature: {
                  saveAsImage: {
                    title: "点击保存为图片",
                    name: `用水趋势图(${nametitle})${props.starttime.split(" ")[0]}-${props.endtime.split(" ")[0]}`
                  }
                }
              },
              grid: {
                left: "20px",
                top: "60px",
                right: "20px",
                bottom: "10px",
                containLabel: true
              },
              legend: {
                x: "center"
              },
              tooltip: {
                trigger: "axis"
              },
              xAxis: {
                type: "category",
                boundarGap: false,
                data: props.chartvalue.xaxis
                // data: ["2024-1", "2024-2", "2024-3", "2024-4", "2024-5", "2024-6", "2024-7", "2024-8", "2024-9", "2024-10", "2024-11", "2024-12"]
              },
              yAxis: yAxis.value,
              series: series.value
            };
          } else {
            option.value = {
              color: ["#3B82F6 ", "#39C670", "#ffcf72"],
              toolbox: {
                show: false,
                feature: {
                  saveAsImage: {
                    title: "点击保存为图片",
                    name: `用水趋势图(${nametitle})${props.starttime.split(" ")[0]}-${props.endtime.split(" ")[0]}`
                  }
                }
              },
              grid: {
                left: "20px",
                top: "60px",
                right: "20px",
                bottom: "10px",
                containLabel: true
              },
              legend: {
                x: "center"
              },
              tooltip: {
                trigger: "axis"
              },
              xAxis: {
                type: "category",
                boundarGap: false,
                data: props.chartvalue.xaxis
                // data: ["2024-1", "2024-2", "2024-3", "2024-4", "2024-5", "2024-6", "2024-7", "2024-8", "2024-9", "2024-10", "2024-11", "2024-12"]
              },
              yAxis: yAxis.value,
              series: series.value
            };
          }
        })
        .catch(() => {
          option.value = {
            color: ["#3B82F6 ", "#39C670", "#ffcf72"],
            toolbox: {
              show: true,
              feature: {
                saveAsImage: {
                  title: "点击保存为图片",
                  name: `用水趋势图(${nametitle})${props.starttime.split(" ")[0]}-${props.endtime.split(" ")[0]}`
                }
              }
            },
            grid: {
              left: "20px",
              top: "60px",
              right: "20px",
              bottom: "10px",
              containLabel: true
            },
            legend: {
              x: "center"
            },
            tooltip: {
              trigger: "axis"
            },
            xAxis: {
              type: "category",
              boundarGap: false,
              data: props.chartvalue.xaxis
              // data: ["2024-1", "2024-2", "2024-3", "2024-4", "2024-5", "2024-6", "2024-7", "2024-8", "2024-9", "2024-10", "2024-11", "2024-12"]
            },
            yAxis: yAxis.value,
            series: series.value
          };
        });
    }
    if (props.activewater == "pure") {
      balanceReportqueryTrendChartUPWFuture({
        forecast: props.forecast,
        field: Materialvalue.value,
        timeUnit: props.queryParams.timeUnit,
        startTime: props.queryParams.startTime,
        endTime: props.queryParams.endTime
      })
        .then(res => {
          console.log(res);
          if (res != null) {
            series.value.push({
              name: `${showoption[0].name}预测值`,
              type: "line",
              data: res.forecastList
            });
            option.value = {
              color: ["#3B82F6 ", "#39C670", "#ffcf72"],
              toolbox: {
                show: false,
                feature: {
                  saveAsImage: {
                    title: "点击保存为图片",
                    name: `用水趋势图(${nametitle})${props.starttime.split(" ")[0]}-${props.endtime.split(" ")[0]}`
                  }
                }
              },
              grid: {
                left: "20px",
                top: "60px",
                right: "20px",
                bottom: "10px",
                containLabel: true
              },
              legend: {
                x: "center"
              },
              tooltip: {
                trigger: "axis"
              },
              xAxis: {
                type: "category",
                boundarGap: false,
                data: props.chartvalue.xaxis
                // data: ["2024-1", "2024-2", "2024-3", "2024-4", "2024-5", "2024-6", "2024-7", "2024-8", "2024-9", "2024-10", "2024-11", "2024-12"]
              },
              yAxis: yAxis.value,
              series: series.value
            };
          } else {
            option.value = {
              color: ["#3B82F6 ", "#39C670", "#ffcf72"],
              toolbox: {
                show: false,
                feature: {
                  saveAsImage: {
                    title: "点击保存为图片",
                    name: `用水趋势图(${nametitle})${props.starttime.split(" ")[0]}-${props.endtime.split(" ")[0]}`
                  }
                }
              },
              grid: {
                left: "20px",
                top: "60px",
                right: "20px",
                bottom: "10px",
                containLabel: true
              },
              legend: {
                x: "center"
              },
              tooltip: {
                trigger: "axis"
              },
              xAxis: {
                type: "category",
                boundarGap: false,
                data: props.chartvalue.xaxis
                // data: ["2024-1", "2024-2", "2024-3", "2024-4", "2024-5", "2024-6", "2024-7", "2024-8", "2024-9", "2024-10", "2024-11", "2024-12"]
              },
              yAxis: yAxis.value,
              series: series.value
            };
          }
        })
        .catch(() => {
          option.value = {
            color: ["#3B82F6 ", "#39C670", "#ffcf72"],
            toolbox: {
              show: true,
              feature: {
                saveAsImage: {
                  title: "点击保存为图片",
                  name: `用水趋势图(${nametitle})${props.starttime.split(" ")[0]}-${props.endtime.split(" ")[0]}`
                }
              }
            },
            grid: {
              left: "20px",
              top: "60px",
              right: "20px",
              bottom: "10px",
              containLabel: true
            },
            legend: {
              x: "center"
            },
            tooltip: {
              trigger: "axis"
            },
            xAxis: {
              type: "category",
              boundarGap: false,
              data: props.chartvalue.xaxis
              // data: ["2024-1", "2024-2", "2024-3", "2024-4", "2024-5", "2024-6", "2024-7", "2024-8", "2024-9", "2024-10", "2024-11", "2024-12"]
            },
            yAxis: yAxis.value,
            series: series.value
          };
        });
    }
    if (props.activewater == "waste") {
      balanceReportqueryTrendChartWWFuture({
        forecast: props.forecast,
        field: Materialvalue.value,
        timeUnit: props.queryParams.timeUnit,
        startTime: props.queryParams.startTime,
        endTime: props.queryParams.endTime
      })
        .then(res => {
          console.log(res);
          if (res != null) {
            series.value.push({
              name: `${showoption[0].name}预测值`,
              type: "line",
              data: res.forecastList
            });
            option.value = {
              color: ["#3B82F6 ", "#39C670", "#ffcf72"],
              toolbox: {
                show: false,
                feature: {
                  saveAsImage: {
                    title: "点击保存为图片",
                    name: `用水趋势图(${nametitle})${props.starttime.split(" ")[0]}-${props.endtime.split(" ")[0]}`
                  }
                }
              },
              grid: {
                left: "20px",
                top: "60px",
                right: "20px",
                bottom: "10px",
                containLabel: true
              },
              legend: {
                x: "center"
              },
              tooltip: {
                trigger: "axis"
              },
              xAxis: {
                type: "category",
                boundarGap: false,
                data: props.chartvalue.xaxis
                // data: ["2024-1", "2024-2", "2024-3", "2024-4", "2024-5", "2024-6", "2024-7", "2024-8", "2024-9", "2024-10", "2024-11", "2024-12"]
              },
              yAxis: yAxis.value,
              series: series.value
            };
          } else {
            option.value = {
              color: ["#3B82F6 ", "#39C670", "#ffcf72"],
              toolbox: {
                show: false,
                feature: {
                  saveAsImage: {
                    title: "点击保存为图片",
                    name: `用水趋势图(${nametitle})${props.starttime.split(" ")[0]}-${props.endtime.split(" ")[0]}`
                  }
                }
              },
              grid: {
                left: "20px",
                top: "60px",
                right: "20px",
                bottom: "10px",
                containLabel: true
              },
              legend: {
                x: "center"
              },
              tooltip: {
                trigger: "axis"
              },
              xAxis: {
                type: "category",
                boundarGap: false,
                data: props.chartvalue.xaxis
                // data: ["2024-1", "2024-2", "2024-3", "2024-4", "2024-5", "2024-6", "2024-7", "2024-8", "2024-9", "2024-10", "2024-11", "2024-12"]
              },
              yAxis: yAxis.value,
              series: series.value
            };
          }
        })
        .catch(() => {
          option.value = {
            color: ["#3B82F6 ", "#39C670", "#ffcf72"],
            toolbox: {
              show: true,
              feature: {
                saveAsImage: {
                  title: "点击保存为图片",
                  name: `用水趋势图(${nametitle})${props.starttime.split(" ")[0]}-${props.endtime.split(" ")[0]}`
                }
              }
            },
            grid: {
              left: "20px",
              top: "60px",
              right: "20px",
              bottom: "10px",
              containLabel: true
            },
            legend: {
              x: "center"
            },
            tooltip: {
              trigger: "axis"
            },
            xAxis: {
              type: "category",
              boundarGap: false,
              data: props.chartvalue.xaxis
              // data: ["2024-1", "2024-2", "2024-3", "2024-4", "2024-5", "2024-6", "2024-7", "2024-8", "2024-9", "2024-10", "2024-11", "2024-12"]
            },
            yAxis: yAxis.value,
            series: series.value
          };
        });
    }
  } else {
    isShowEcharts.value = false;
  }
};
const clearvalue = () => {
  Materialvalue.value = "";
};
defineExpose({
  pieClick,
  clearvalue
});
watch(
  () => props.chartvalue,
  newOption => {
    console.log(newOption);
    if (props.chartvalue.detailList) {
      if (Materialvalue.value == "") {
        Materialvalue.value = props.chartvalue?.detailList[0]?.field;
      }
    }
    getoptions();
  },
  { immediate: true }
);
</script>

<style scoped lang="scss">
.parent {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}

.downImg {
  position: absolute;
  top: -30px;
  right: 0;
  cursor: pointer;
}
</style>
